<template>
		<view class="navbar">
		    <view class="navbar-inner">
		      <view class="left">{{messageTip}}</view>
		      <view class="right">
		        <view @click="toggleDropdown" class="dropdown-icon">☰</view>
		        <view v-show="showDropdown" class="dropdown-content">
				  <view @click="navigateToPage('page1')">信息提交</view>
		          <view @click="navigateToPage('page2')">历史提交记录</view>
		          <view @click="navigateToPage('page3')">个人中心</view>
		        </view>
		      </view>
		    </view>
		  </view>
		  <view v-show="currentPage === 'page1'" >
			<view class="container">
			    <view class="image-container">
			      <image src="/static/780.jpg" mode="scaleToFill" style="width: 100%;" ></image>
			    </view>
			    <view v-if="currentPage === 'page1'" class="cu-form padding-sm">
			      <view class="cu-form-group">
			        <picker mode="selector" :range="provinces" :value="provinceIndex" @change="onProvinceChange">
			          <view class="cu-item arrow">
			            <view class="content">{{selectedProvince}}</view>
			          </view>
			        </picker>
			      </view>
			      <view class="cu-form-group">
			        <picker mode="selector" :range="cities" :value="cityIndex" @change="onCityChange">
			          <view class="cu-item arrow">
			            <view class="content">{{selectedCity}}</view>
			          </view>
			        </picker>
			      </view>
			      <view class="cu-form-group">
			        <input class="cu-input" type="text" placeholder="请输入具体地址" v-model="address" />
			      </view>
			      <button class="cu-btn block bg-blue margin-top-lg" @click="submitForm">下一步</button>
			    </view>
			  </view>
		  </view>
		  <view v-show="showNext" class="container">
			       <!-- 表格展示 -->
			       <table>
			         <thead>
			           <tr>
			             <th>等级</th>
			             <th>污染等级</th>
			             <th>相应信息</th>
			           </tr>
			         </thead>
			         <tbody>
			           <tr v-for="(item, index) in pollutionData" :key="index">
			             <td>{{ index + 1 }}</td>
			             <td>{{ item.level }}</td>
			             <td>{{ item.info }}</td>
			           </tr>
			         </tbody>
			       </table>
					<view class="title">预估等级：</view>  <!-- 添加性别标签 -->
					<radio-group @change="radioChange">
					  <label class="radio-label">
					    <radio value="1" color="#00ff7f" /> 等级一
					  </label>
					  <label class="radio-label">
					    <radio value="2" color="#00ff00" /> 等级二
					  </label>
					  <label class="radio-label">
					    <radio value="3" color="#aaff00" /> 等级三
					  </label>
					  <label class="radio-label">
					    <radio value="4" color="#aaaa00" /> 等级四
					  </label>
					  <label class="radio-label">
					    <radio value="5" color="#aa5500" /> 等级五
					  </label>
					  <label class="radio-label">
					    <radio value="6" color="#aa0000" /> 等级六
					  </label>
					</radio-group>
					<!-- <p>当前选择的空气质量指数等级是：{{selectedAQILevel}}</p> -->
				   <p>备注信息：</p>
			       <textarea v-model="feedback" placeholder="请输入您的反馈信息"></textarea>					
			       <!-- 提交按钮 -->
			       <button @click="submitFormNext">提交</button>
		  </view>
		  <view v-if="currentPage === 'page2'">
			 <table>
			                 <thead>
			                     <tr>
			                         <th>污染级别</th>
			                         <th>日期</th>
			                         <th>时间</th>
			                         <th>省</th>
									 <th>市</th>
			                     </tr>
			                 </thead>
			                 <tbody>
			                     <tr v-for="item in historyList">
			                         <td>{{ item.level  }}</td>
			                         <td>{{ item.date  }}</td>
			                         <td>{{ item.time  }}</td>
			                         <td>{{ item.sheng  }}</td>
									 <td>{{ item.shi  }}</td>
			                     </tr>
			                 </tbody>
			             </table>
		  </view>
		  <view v-if="currentPage === 'page3'">
		  	
		  </view>
</template>

<script>
	export default {
		data() {
			return {
				historyList:[],
				date:'',
				time:'',
				selectedAQILevel: null,
				feedback:'',
				showNext:false,
				showDropdown: false,
				currentPage: 'page1',
				messageTip:'信息提交',
				provinces:[
				  "北京市",
				  "黑龙江省",
				  "江苏省",
				  "浙江省",
				  "安徽省",
				  "福建省",
				  "江西省",
				  "山东省",
				  "河南省",
				  "湖北省",
				  "湖南省",
				  "天津市",
				  "广东省",
				  "甘肃省",
				  "四川省",
				  "贵州省",
				  "海南省",
				  "云南省",
				  "青海省",
				  "陕西省",
				  "广西壮族自治区",
				  "西藏自治区",
				  "上海市",
				  "宁夏回族自治区",
				  "新疆维吾尔自治区",
				  "内蒙古自治区",
				  "澳门特别行政区",
				  "香港特别行政区",
				 " 重庆市",
				  "河北省",
				  "山西省",
				  "台湾省",
				  "辽宁省",
				  "吉林省"
				],
				cities: [],
				selectedProvince: '选择省份',
				selectedCity: '选择城市',
				provinceIndex: 0,
				cityIndex: 0,
				address: '',
				pollutionData: [
				        { level: '优', info: '空气质量令人满意，基本无空气污染' },
				        { level: '良', info: '空气质量可按受，但某些污染物对极少数异常敏感人的健康有影响' },
						{ level: '轻度污染', info: '易感人群症状有轻微加剧，健康人出现刺激症状' },
						{ level: '中度污染', info: '易感人群症状有轻微加剧，健康人出现刺激症状' },
						{ level: '重度污染', info: '易感人群症状有轻微加剧，健康人出现刺激症状' },
						{ level: '严重污染', info: '易感人群症状有轻微加剧，健康人出现刺激症状' },
				      ],
				// returnCitiesList:''
			}
		},
		watch:{
			'currentPage'(newVal){
				if(newVal=='page2'){
					uni.request({
						url:'http://localhost:8086/findHistory',
						method:'GET',
						header:{'Content-Type': 'application/json'},
						data:{number:uni.getStorageSync('id')},
						success: (res) => {
							console.log(res)
							this.historyList=res.data
						}
					})
				}
			}
		},
		methods: {
			radioChange:function(e){
				this.selectedAQILevel=e.detail.value
			},
			toggleDropdown() {
			      this.showDropdown = !this.showDropdown;
			    },
			navigateToPage(pageName) {
			      this.showDropdown = false;
				  this.currentPage = pageName
				  if(pageName=='page2'){
					  this.messageTip='历史提交记录'
				  }else if(pageName=='page1'){
					  this.messageTip='信息提交'
				  }else{
					  this.messageTip='个人中心'
				  }
			    },
			onProvinceChange(e) {
			      this.provinceIndex = e.detail.value;
			      this.selectedProvince = this.provinces[this.provinceIndex];
			      this.getCitiesByProvince(this.selectedProvince);
				  console.log(this.cities)
			      // this.selectedCity = this.cities[0];
			    },
			onCityChange(e) {
			      this.cityIndex = e.detail.value;
			      this.selectedCity = this.cities[this.cityIndex];
			    },
			getCitiesByProvince(province) {
			    const param = { name: province };
			    uni.request({
			      url: 'http://localhost:8086/queryCity',
			      method: 'GET',
			      header: {
			        'Content-Type': 'application/json' // 设置请求头部为JSON格式
			      },
			      data: param,
			      success: (res) => {
			        // 假设后端返回的数据格式正确，并且每个城市对象都有一个 `name` 属性
			        if (res.statusCode === 200 && Array.isArray(res.data)) {
			          this.cities = res.data.map(item => item.name);
					  setTimeout(() => {
					              this.selectedCity = this.cities[0] || '选择城市';
					            }, 500);
			        } else {
			          console.error("Failed to load cities, status code:", res.statusCode);
			          this.cities = []; // 清空城市列表或处理错误
			        }
			      },
			      fail: (error) => {
			        console.error("Request failed:", error);
			        this.cities = []; // 清空城市列表或处理错误
			      }
			    });
			  },
			submitForm() {
				  if (this.selectedProvince && this.selectedCity && this.address) {
				      console.log("所有字段都已正确填写。");
					  console.log('提交的信息：', {
					    province: this.selectedProvince,
					    city: this.selectedCity,
					    address: this.address
					  });
					  this.currentPage=''
					  this.showNext=true
				    } else {
				      uni.showToast({
				      	title: '信息填写不完整！',
				      	icon: 'none',
				      	duration: 2000
				      });
				    }
			    },
				submitFormNext(){
					var getTime = new Date().getTime(); //获取到当前时间戳
					  var time = new Date(getTime); //创建一个日期对象
					    var year = time.getFullYear(); // 年
					    var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
					    var date = time.getDate().toString().padStart(2, '0'); // 日
					    var hour = time.getHours().toString().padStart(2, '0'); // 时
					    var minute = time.getMinutes().toString().padStart(2, '0'); // 分
					    var second = time.getSeconds().toString().padStart(2, '0'); // 秒
						this.date=(year + "-" + month + "-" + date)
						this.time=(hour + ":" + minute + ":" + second)
					const param={
						sheng:this.selectedProvince,
						shi:this.selectedCity,
						address:this.address,
						level:this.selectedAQILevel,
						message:this.feedback,
						userPhone:uni.getStorageSync('id'),
						date:this.date,
						time:this.time
					}
					uni.request({
						url:'http://localhost:8086/addMesg',
						method:"POST",
						header:{
			        'Content-Type': 'application/json' // 设置请求头部为JSON格式
						},
						data:param,
						success: (res) => {
							if(res.data==1){
								uni.showToast({
									title: '添加成功！',
									icon: 'none',
									duration: 2000
								});
							}
						}
					})
				}
		}
	}
</script>

<style>
/* body{
	background-color: rgb(2,5,2);
} */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #123456;
  color: white;
  padding: 10px;
}
.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.dropdown-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 10px;
  top: 40px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content view {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content view:hover {
  background-color: #f1f1f1;
}





/* .cu-form */
.container {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  margin-top: 82px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  background: #fff;
}


table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

.radio-buttons {
  margin-bottom: 20px;
}

.radio-label {
  margin-right: 10px;
  font-weight: bold;
  color: #333;
}

textarea {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  resize: vertical; /* Allows the user to resize the textarea vertically */
}

button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}
</style>
